import { isTrue } from "../../util/code.js";
import { getEnvAttr, getValue } from "../../util/ObjectUtil.js";

export function checkVBind(vm,vnode) {
    if (vnode.nodeType != 1) {
        return;
    }

    //获取vnode.elm中所有的属性
    let attrNames = vnode.elm.getAttributeNames();
    //循环所有的属性->判断属性是否以v-bind:开头或者是:
    for (let i = 0; i < attrNames.length; i++) {
        const attr = attrNames[i];
        if (attr.indexOf("v-bind:") == 0 || attr.indexOf(":") == 0) {
            //对这个属性进行绑定vBind()
            vBind(vm,vnode,attr,vnode.elm.getAttribute(attr));
        }
    }
    //对象v-bind属性进行绑定
    /**
     * 用：拆分attr，得到没有v-bind的纯属性
     * 通过getEnvAttr(在util中)得到作用域（vnode.env + vue-data)
     * 
     * 先考虑简单的，:src = "key"; 直接通过getValue找到vue-data-value或者vnode.env得到值
     * 再重新设置这个值：setAttribute(k,v)
     * 
     * 对于特殊情况:class = "{red:obj.x<2,blue:obj.x>2}" ;
     * 先判断是否有{}模板，来确定是否是复杂情况,如果是复杂情况
     * 1.先去掉模板{} ，记得.trim();
     * 2.再用"，"拆分开，进行循环
     * 3，用一个函数来解析他analysisExpression。分析后判断是否返回red+" "
     * 4，最后把setAttrubute(k,v);上去
     */
    function vBind(vm,vnode,attr,value) {
        let k = attr.split(":")[1];
        let obj = getEnvAttr(vm,vnode);
        let v = "";
        if (/^{[\w\W]+}/.test(value)) { //复杂的形式
            let str = value.substring(1,value.length-1).trim();
            let expressions = str.split(",");
            for (let i = 0; i < expressions.length; i++) {
                const ex = expressions[i]; //red:obj.x<2
                v += analysisExpression(vm,vnode,ex,obj)  //对ex进行分析,分析后判断是否返回red+" "
            }
        }else{ //简单的形式
            v = getValue(obj,value);      
        }
        vnode.elm.removeAttribute(attr);
        vnode.elm.setAttribute(k,v);
    }
    
    
   
    /**
     * 对于解析：red:obj.x<2,返回 "red " 或者 "";
     * 
     * 获取可执行表达式：先通过：分割得到表达式obj.x < 2
     * 结合环境对象判断表达式是否成立：obj.x < 2 （最好的是用编译原理，将字符串转换为代码），我们这里可以使用eval(),
     * if(isTrue(code,env)){ 如果成立，添加属性  },isTrue写在工具中判断。
     */
    function analysisExpression(vm,vnode,ex,env) {
       let site = ex.indexOf(":"); //判断是{red} 还是{red:true};(已经去掉模板{}了的)
       let result = "";
       if (site>-1) {
           let att = ex.split(":")[0].trim();
           if(isTrue(ex,env)) result = att+" ";
       }else{
           result =  ex+" ";
       }
       return result;
    }
}